<!-- 高级筛选按钮 -->
<template>
  <el-badge is-dot class="item" :hidden="isHidden">
    <div class="power-btn flex pointer" style="border-radius: 2px;overflow: hidden;">
      <i class="iconfont  icon-shaixuan"></i>
      <span>高级筛选</span>
    </div>
  </el-badge>

</template>
<script>
export default {
  name: '', // ·������
  props: {
    queryData: {
      type: Object
    }
  },
  data() {
    return {
      isHidden: true
    }
  },
  computed: {

  },
  watch: {
    queryData: {
      deep: true,
      handler: function(newV, oldV) {
        const arr = Object.keys(newV)
        const flag = arr.every(item => {
          return newV[item] === undefined || newV[item] === null || newV[item] === ''
        })
        this.isHidden = flag
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {

  }
}
</script>

<style scoped>
  .power-btn {
    width: 104px;
    height: 32px;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 32px;
    border: 1px solid #E0E2E7;
  }

  .power-btn i {
    font-size: 14px;
    margin-right: 8px;

  }

  .item /deep/ .el-badge__content{
    height: 12px;
    width: 12px;
    top: -3px;
    right: -4px;
    transform: translate(0px,0%);
    background-color: #15C5CE;
    border: 1px solid #FFFFFF;
  }
</style>
